<template>
  <div class="body-wrap">
    <div class="head">
      微信扫码登录
    </div>
    <vue-wxlogin :loading="loading"
      :href="wx.href"
      :state="wx.state"
      :appid="wx.appid"
      :scope="wx.scope"
      :redirect_uri="wx.redirect_uri"
      self_redirect="true"
      @refresh="refresh"
      height="160px" />
    <div class="other-login">
      <p class="other-login-title">
        <b></b>
        <span>选择其他登录方式</span>
        <b></b>
      </p>
      <span class="icon-btn">
        <svg-icon iconClass="phone2"
          @click="ohterLogin" />
      </span>
    </div>
  </div>
</template>

<script type="text/javascript">
import { mapGetters } from 'vuex'
import vueWxlogin from '@/components/vue-wxlogin.vue'
import { getPartyParam, login } from '@/api/login'
import mixins from './mixins'
export default {
  name: 'WxLogin',
  mixins: [mixins],
  components: {
    vueWxlogin
  },
  props: {
    isPage: Boolean
  },
  data () {
    return {
      loading: true,
      wx: {
        href: 'data:text/css;base64,LmltcG93ZXJCb3h7CiAgICBsaW5lLWhlaWdodDogMTsKfQoKLmltcG93ZXJCb3ggLnRpdGxlLAouaW1wb3dlckJveCAuaW5mbywKLnN0YXR1c19pY29uLAouaW1wb3dlckJveCAuc3RhdHVzIHtkaXNwbGF5OiBub25lO30KCi5pbXBvd2VyQm94IC5xcmNvZGUgewogICAgd2lkdGg6IDE2MHB4OwogICAgaGVpZ2h0OiAxNjBweDsKICAgIGJvcmRlcjogMDsKICAgIG1hcmdpbi10b3A6IDA7Cn0=',
        state: 'qekjdsbkje893214wechat',
        appid: '',
        scope: '',
        redirect_uri: encodeURI('https://usercenter-xzdesktop.cqttech.com/partylogincb?type=WxLoginFinish'),
        style: 'black'
      }
    }
  },
  computed: {
    ...mapGetters(['appInfo'])
  },
  created () {
    this.getPartyParam()
    window.onWxLoginFinish = this.onWxLoginFinish
  },
  beforeDestroy () {
    window.onWxLoginFinish = null
  },
  methods: {
    /**
     * 获取第三方登录参数
     */
    getPartyParam () {
      this.loading = true
      getPartyParam({ type: 'wx' }).then(res => {
        const data = res.data || {}
        this.wx.appid = data.appid
        this.wx.scope = data.scope
        this.loading = false
      }).catch(e => {
        this.$PsMessage.closeAll()
        this.loading = false
      })
    },
    /**
     * 刷新二维码
     */
    refresh () {
      this.$xz('xz_substat_action', 1725)
      this.getPartyParam()
    },
    /**
     * 切换登录方式
     */
    ohterLogin () {
      this.$xz('xz_substat_action', 1724)
      this.$store.dispatch('user/login', { type: 'phoneLogin' })
    },
    onWxLoginFinish ({ code } = {}) {
      const params = {
        'type': 'wx',
        'authCode': code, // 第三方登录授权码
        'grantType': 'authorization_code', // 授权类型 client_credentials: 客户端凭证 authorization_code:授权码
        'channel': this.appInfo.channel, // 渠道信息
        'uuid': this.appInfo.uuid, // 设备信息
        'device_name': this.appInfo.device_name, // 设备名称
        'version': this.appInfo.version
      }
      login(params).then(res => {
        const data = res.data || {}
        data.isAutoLogin = true
        data.isLogin = true
        data.loginType = 'wxLogin'
        this.onLoginFinish(data)
      }).catch(err => {
        if (err && err.code === 100429) {
          const data = err.data
          data.isAutoLogin = true
          data.loginType = 'wxLogin'
          this.needDelDevice(data)
        } else {
          this.refresh()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// @import "@/theme/common/var";
.body-wrap {
  width: 270px;
}
.head {
  padding: 0 0 20px;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  color: #fff;
}

.other-login {
  margin-top: 87px;
  margin-bottom: 17px;
  text-align: center;
  &-title {
    display: flex;
    justify-content: center;
    align-items: center;
    b {
      flex: 1;
      height: 1px;
      background: rgba(255, 255, 255, 0.1);
    }
    span {
      padding: 0 10px;
      font-size: 12px;
    }
  }
  .icon-btn {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-top: 6px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.25s;
    &:hover {
      background: rgba(255, 255, 255, 0.1);
    }
  }
  .svg-icon {
    font-size: 32px;
    vertical-align: -0.33em;
  }
}
</style>
